h3 Grid

// START row
.row
  .col-lg-12
    .panel.panel-default
      .panel-body
        h3 Example: Stacked-to-horizontal
        p
          | Using a single set of
          code .col-md-*
          | grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any
          code .row
          | .
        .row
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
          .col-md-1: .box-placeholder .col-md-1
        .row
          .col-md-8: .box-placeholder .col-md-8
          .col-md-4: .box-placeholder .col-md-4
        .row
          .col-md-4: .box-placeholder .col-md-4
          .col-md-4: .box-placeholder .col-md-4
          .col-md-4: .box-placeholder .col-md-4
        .row
          .col-md-6: .box-placeholder .col-md-6
          .col-md-6: .box-placeholder .col-md-6

// END row
// START row
.row
  .col-lg-12
    .panel.panel-default
      .panel-body
        h3 Example: Mobile and desktop
        p
          | Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding
          code .col-xs-*
          code .col-md-*
          | to your columns. See the example below for a better idea of how it all works.
        .row
          .col-xs-12.col-md-8: .box-placeholder .col-xs-12 .col-md-8
          .col-xs-6.col-md-4: .box-placeholder .col-xs-6 .col-md-4
        .row
          .col-xs-6.col-md-4: .box-placeholder .col-xs-6 .col-md-4
          .col-xs-6.col-md-4: .box-placeholder .col-xs-6 .col-md-4
          .col-xs-6.col-md-4: .box-placeholder .col-xs-6 .col-md-4
        .row
          .col-xs-6: .box-placeholder .col-xs-6
          .col-xs-6: .box-placeholder .col-xs-6

// END row
// START row
.row
  .col-lg-12
    .panel.panel-default
      .panel-body
        h3 Example: Mobile, tablet, desktops
        p
          | Build on the previous example by creating even more dynamic and powerful layouts with tablet
          code .col-sm-*
          | classes.
        .row
          .col-xs-12.col-sm-6.col-md-8: .box-placeholder .col-xs-12 .col-sm-6 .col-md-8
          .col-xs-6.col-md-4: .box-placeholder .col-xs-6 .col-md-4
        .row
          .col-xs-6.col-sm-4: .box-placeholder .col-xs-6 .col-sm-4
          .col-xs-6.col-sm-4: .box-placeholder .col-xs-6 .col-sm-4

          .clearfix.visible-xs: .box-placeholder
          .col-xs-6.col-sm-4: .box-placeholder .col-xs-6 .col-sm-4

// END row
// START row
.row
  .col-lg-12
    .panel.panel-default
      .panel-body
        h3#grid-responsive-resets Responsive column resets
        p
          | With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a
          code .clearfix
          | and our
          a(href='#responsive-utilities') responsive utility classes
          | .
        .row
          .col-xs-6.col-sm-3: .box-placeholder
            | .col-xs-6 .col-sm-3
            br
            | Resize your viewport or check it out on your phone for an example.
          .col-xs-6.col-sm-3: .box-placeholder .col-xs-6 .col-sm-3

          .clearfix.visible-xs
          .col-xs-6.col-sm-3: .box-placeholder .col-xs-6 .col-sm-3
          .col-xs-6.col-sm-3: .box-placeholder .col-xs-6 .col-sm-3

// END row
// START row
.row
  .col-lg-12
    .panel.panel-default
      .panel-body
        h3#grid-offsetting Offsetting columns
        p
          | Move columns to the right using
          code .col-md-offset-*
          | classes. These classes increase the left margin of a column by
          code *
          | columns. For example,
          code .col-md-offset-4
          | moves
          code .col-md-4
          | over four columns.
        .row
          .col-md-4: .box-placeholder .col-md-4
          .col-md-4.col-md-offset-4: .box-placeholder .col-md-4 .col-md-offset-4
        .row
          .col-md-3.col-md-offset-3: .box-placeholder .col-md-3 .col-md-offset-3
          .col-md-3.col-md-offset-3: .box-placeholder .col-md-3 .col-md-offset-3
        .row
          .col-md-6.col-md-offset-3: .box-placeholder .col-md-6 .col-md-offset-3

// END row
// START row
.row
  .col-lg-12
    .panel.panel-default
      .panel-body
        h3#grid-nesting Nesting columns
        p
          | To nest your content with the default grid, add a new
          code .row
          | and set of
          code .col-md-*
          | columns within an existing
          code .col-md-*
          | column. Nested rows should include a set of columns that add up to 12.
        .row
          .col-md-9: .box-placeholder
            | Level 1: .col-md-9
            .row
              .col-md-6: .box-placeholder
                | Level 2: .col-md-6
              .col-md-6: .box-placeholder
                | Level 2: .col-md-6

// END row
// START row
.row
  .col-lg-12
    .panel.panel-default
      .panel-body
        h3#grid-column-ordering Column ordering
        p
          | Easily change the order of our built-in grid columns with
          code .col-md-push-*
          | and
          code .col-md-pull-*
          | modifier classes.
        .row
          .col-md-9.col-md-push-3: .box-placeholder .col-md-9 .col-md-push-3
          .col-md-3.col-md-pull-9: .box-placeholder .col-md-3 .col-md-pull-9

// END row
